/**
 * @flow
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    Dimensions,
    Switch
} from 'react-native';

const deviceWidth = Dimensions.get('window').width;

export default class MineCell extends Component {
    constructor(props){
        super(props);
        this.state={
            switchValue:this.props.switchValue,
        };
    }
    
    render() {
        let imguri = {};
        switch (this.props.icon){
            case 'xmgqb':
                imguri = require('../image/draft.png');
                break;
            case 'dyq':
                imguri = require('../image/like.png');
                break;
            case 'jfsc':
                imguri = require('../image/card.png');
                break;
            case 'jrtj':
                imguri = require('../image/new_friend.png');
                break;
            case 'wyhz':
                imguri = require('../image/pay.png');
                break;
            case 'wddd':
                imguri = require('../image/collect.png');
                break;
        }
        return (
            <TouchableOpacity>
                <View style={styles.container}>
                    <View style={{flexDirection:'row',alignItems:'center',paddingLeft:10}}>
                        <Image source={imguri} style={{width:30,height:30,borderRadius:15}}/>
                        <Text style={{marginLeft:10,color:'black',fontWeight:'bold'}}>{this.props.title}</Text>
                    </View>
                    {this.renderSwitch()}
                </View>
            </TouchableOpacity>
        );
    }
    
    renderSwitch() {
        if(this.props.switchDisplay){
            return (
                <Switch disabled={false} onValueChange={(value)=>{this.setState({switchValue:value})}} value={this.state.switchValue}/>
            );
        }
        return (
            <View style={{flexDirection:'row',alignItems:'center',marginRight:10}}>
                {this.renderRightImg()}
                <Text style={{marginRight:5,fontSize:12}}>{this.props.rightText}</Text>
                <Image source={require('../image/icon_cell_rightarrow.png')} style={{width:8,height:13}}/>
            </View>
        );
    }
    
    renderRightImg(){
        if(this.props.newImageDisplay){
            return (
                <Image source={require('../image/me_new.png')} style={{width:24,height:13}}/>
            );
        }
    }
}

const styles = StyleSheet.create({
    container: {
        width:deviceWidth,
        height:44,
        backgroundColor:'white',
        borderBottomColor:'#ddd',
        borderBottomWidth:1,
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center'
    }
});
